import L from "leaflet";
import "leaflet-polylinedecorator";
import "leaflet-rotatedmarker";
import { nav, doorFrame, begin, end } from "@/assets/img.js";
import { ElMessage } from "element-plus";

class AntPathPolyline {
  static color = [
    "#006600",
    "#0000cc",
    "#e62f00",
    "#8600b3",
    "#b35900",
    "#ff9900",
    "#00b2b3",
    "#000000",
    "#006699",
    "#cc0099",
    "#B0E0E6",
    "#4169E1",
    "#6A5ACD",
    "#87CEEB",
    "#00FFFF",
    "#385E0F",
    "#082E54",
    "#7FFFD4",
    "#40E0D0",
    "#00FF00",
    "#7FFF00",
    "#00C957",
    "#BDFCC9",
    "#6B8E23",
    "#2E8B57",
    "#A020F0",
    "#8A2BE2",
    "#DA70D6",
    "#DDA0DD",
    "#33A1C9",
    "#191970",
    "#0B1746",
    "#1E90FF",
    "#3D59AB",
    "#D2B48C",
    "#F4A460",
    "#8B4513",
    "#A0522D",
    "#5E2612",
    "#734A12",
    "#808A87",
    "#708069",
    "#808069",
    "#9C661F",
    "#B03060",
    "#FF4500",
    "#FF9912",
    "#E3A869",
    "#D2691E",
    "#FF7D40",
    "#BC8F8F",
    "#03A89E",
    "#A39480",
  ];

  drawPolyline(map, vehicleTrack, layerGroup, personIndex, polylineStyleIndex) {
    if (!vehicleTrack) return false;
    const points = [];
    const pointInfo = [];
    if(vehicleTrack["trackList"].length === 0){
      ElMessage.warning("当前车辆无轨迹数据");
    }
    for (let i = 0; i <= vehicleTrack["trackList"].length - 1; i++) {
      if (
        vehicleTrack["trackList"][i]["latitude"] &&
        vehicleTrack["trackList"][i]["longitude"]
      ) {
        const lat = vehicleTrack["trackList"][i]["latitude"];
        const lon = vehicleTrack["trackList"][i]["longitude"];
        points.push([lat, lon]);
        pointInfo.push({
          stationName: vehicleTrack["trackList"][i]["stationName"],
          dateTime: vehicleTrack["trackList"][i]["dateTime"],
        });
      }
    }

    const len = points.length;

    if (len === 0) return false;

    map.setView(points[len - 1], 8);

    setTimeout(() => {
      // 第一个点
      const firstMarker = L.marker(points[0], {
        icon: L.icon({
          iconUrl: begin, // 图标图片的URL
          iconSize: [32, 32], // 图标的大小
          iconAnchor: [12, 30], // 图标的锚点，即图标的位置应该放置在地图上的位置
          popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
        }),
      })
        .addTo(layerGroup)
        .bindTooltip(
          `<div class="leaflet-popup-content-div"><b>车牌号：</b>${vehicleTrack["vehicleNumber"]}</div>
            <div class="leaflet-popup-content-div"><b>拍摄地点：</b>${pointInfo[0]["stationName"]}</div>
            <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${pointInfo[0]["dateTime"]}</div>
            <div class="leaflet-popup-content-div"><b>经度：</b>${points[0][0]}</div>
            <div class="leaflet-popup-content-div"><b>纬度：</b>${points[0][1]}</div>
            `,
          {
            permanent: false,
            direction: "top",
            offset: [4, -30],
          }
        );

      firstMarker.setZIndexOffset(1000);

      map.on("zoomend", function () {
        const newLatLng = firstMarker.getLatLng(); // 获取当前标记的位置
        firstMarker.setLatLng(newLatLng); // 重设标记的位置
      });

      // 中间点
      for (let i = 1; i <= len - 2; i++) {
        const marker = L.marker(points[i], {
          icon: L.icon({
            iconUrl: doorFrame, // 图标图片的URL
            iconSize: [18, 18], // 图标的大小
            iconAnchor: [10, 18], // 图标的锚点，即图标的位置应该放置在地图上的位置
            popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
          }),
        })
          .addTo(layerGroup)
          .bindTooltip(
            `<div class="leaflet-popup-content-div"><b>车牌号：</b>${vehicleTrack["vehicleNumber"]}</div>
              <div class="leaflet-popup-content-div"><b>拍摄位置：</b>${pointInfo[i]["stationName"]}</div>
              <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${pointInfo[i]["dateTime"]}</div>
              <div class="leaflet-popup-content-div"><b>经度：</b>${points[i][1]}</div>
              <div class="leaflet-popup-content-div"><b>纬度：</b>${points[i][0]}</div>
              `,
            {
              permanent: false,
              direction: "top",
              offset: [-1, -15],
            }
          )
          .on("click", function () {
            marker.openPopup();
          });

        // 地图缩放时避免图标错位
        map.on("zoomend", function () {
          const newLatLng = marker.getLatLng(); // 获取当前标记的位置
          marker.setLatLng(newLatLng); // 重设标记的位置
        });
      }

      const polyline = L.polyline(points, {
        weight: 6,
        color: "#459c50",
      }).addTo(layerGroup);
      L.polylineDecorator(polyline, {
        patterns: [
          {
            offset: 30, // 箭头起始位置距离线条两端的距离
            repeat: 40, // 箭头重复的间隔
            symbol: L.Symbol.arrowHead({
              pixelSize: 3, // 箭头大小
              headAngle: 90, // 角度
              polygon: false,
              pathOptions: { stroke: true, weight: 2, color: "#fff" },
            }),
          },
        ],
      }).addTo(layerGroup);

      // 最新的点
      const endMarker = L.marker(points[len - 1], {
        icon: L.icon({
          iconUrl: end, // 图标图片的URL
          iconSize: [32, 32], // 图标的大小
          iconAnchor: [12, 30], // 图标的锚点，即图标的位置应该放置在地图上的位置
          popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
        }),
      })
        .addTo(layerGroup)
        .bindTooltip(
          `<div class="leaflet-popup-content-div"><b>车牌号：</b>${
            vehicleTrack["vehicleNumber"]
          }</div>
        <div class="leaflet-popup-content-div"><b>拍摄地点：</b>${
          pointInfo[len - 1]["stationName"]
        }</div>
        <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${
          pointInfo[len - 1]["dateTime"]
        }</div>
        <div class="leaflet-popup-content-div"><b>经度：</b>${
          points[len - 1][0]
        }</div>
        <div class="leaflet-popup-content-div"><b>纬度：</b>${
          points[len - 1][1]
        }</div>
        `,
          {
            permanent: false,
            direction: "top",
            offset: [4, -30],
          }
        );

      endMarker.setZIndexOffset(1000);

      map.on("zoomend", function () {
        const newLatLng = endMarker.getLatLng(); // 获取当前标记的位置
        endMarker.setLatLng(newLatLng); // 重设标记的位置
      });
    }, 100);
  }

  drawAllPoints(
    map,
    vehicleTrack,
    layerGroup,
    personIndex,
    polylineStyleIndex
  ) {
    if (!vehicleTrack) return false;

    const points = [];
    const pointInfo = [];
    for (let i = 0; i <= vehicleTrack["trackList"].length - 1; i++) {
      if (
        vehicleTrack["trackList"][i]["latitude"] &&
        vehicleTrack["trackList"][i]["longitude"]
      ) {
        const lat = vehicleTrack["trackList"][i]["latitude"];
        const lon = vehicleTrack["trackList"][i]["longitude"];
        points.push([lat, lon]);
        pointInfo.push({
          stationName: vehicleTrack["trackList"][i]["stationName"],
          dateTime: vehicleTrack["trackList"][i]["dateTime"],
        });
      }
    }

    const len = points.length;

    if (len === 0) return false;

    setTimeout(() => {
      for (let i = 0; i <= len - 2; i++) {
        const marker = L.marker(points[i], {
          icon: L.divIcon({
            className: "custom-div-radius",
            html: `<div style="width: 10px; height: 10px; border-radius: 10px; background: ${AntPathPolyline.color[personIndex]};"></div>`,
            iconSize: [10, 10], // 这将是图标的大小，对应于像素
          }),
        })
          .addTo(layerGroup)
          .bindTooltip(
            `<div class="leaflet-popup-content-div"><b>车牌号：</b>${vehicleTrack["vehicleNumber"]}</div>
                <div class="leaflet-popup-content-div"><b>拍摄位置：</b>${pointInfo[i]["stationName"]}</div>
                <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${pointInfo[i]["dateTime"]}</div>
                <div class="leaflet-popup-content-div"><b>经度：</b>${points[i][1]}</div>
                <div class="leaflet-popup-content-div"><b>纬度：</b>${points[i][0]}</div>
                `,
            {
              permanent: false,
              direction: "top",
              offset: [0, -8],
            }
          )
          .on("click", function () {
            marker.openPopup();
          });
      }

      // 最新的点
      const endMarker = L.marker(points[len - 1], {
        icon: L.divIcon({
          className: "custom-div-icon",
          html: `<div style="background: ${AntPathPolyline.color[personIndex]};"><span>${vehicleTrack["vehicleNumber"]}</span></div>`,
          iconSize: [65, 20], // 这将是图标的大小，对应于像素
        }),
      })
        .addTo(layerGroup)
        .bindTooltip(
          `<div class="leaflet-popup-content-div"><b>车牌号：</b>${
            vehicleTrack["vehicleNumber"]
          }</div>
          <div class="leaflet-popup-content-div"><b>拍摄地点：</b>${
            pointInfo[len - 1]["stationName"]
          }</div>
          <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${
            pointInfo[len - 1]["dateTime"]
          }</div>
          <div class="leaflet-popup-content-div"><b>经度：</b>${
            points[len - 1][0]
          }</div>
          <div class="leaflet-popup-content-div"><b>纬度：</b>${
            points[len - 1][1]
          }</div>
          `,
          {
            permanent: false,
            direction: "top",
            offset: [0, -12],
          }
        );

      endMarker.setZIndexOffset(1000);

      map.on("zoomend", function () {
        const newLatLng = endMarker.getLatLng(); // 获取当前标记的位置
        endMarker.setLatLng(newLatLng); // 重设标记的位置
      });
    }, 100);
  }

  drawPoint(map, point, personName, stationName, dateTime, layerGroup) {
    if (point.length === 0) {
      return;
    }

    map.setView(point, 8);

    setTimeout(() => {
      const marker = L.marker(point, {
        icon: L.icon({
          iconUrl: nav, // 图标图片的URL
          iconSize: [24, 24], // 图标的大小
          iconAnchor: [10, 20], // 图标的锚点，即图标的位置应该放置在地图上的位置
          popupAnchor: [-3, -76], // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
        }),
      })
        .addTo(layerGroup)
        .bindTooltip(
          `<div class="leaflet-popup-content-div"><b>姓名：</b>${personName}</div>
          <div class="leaflet-popup-content-div"><b>拍摄位置：</b>${stationName}</div>
          <div class="leaflet-popup-content-div"><b>拍摄时间：</b>${dateTime}</div>
          <div class="leaflet-popup-content-div"><b>经度：</b>${point[0]}</div>
          <div class="leaflet-popup-content-div"><b>纬度：</b>${point[1]}</div>
          `,
          {
            permanent: false,
            direction: "top",
            offset: [1, -22],
          }
        )
        .on("click", function () {
          marker.openPopup();
        });

      // 地图缩放时避免图标错位
      map.on("zoomend", function () {
        const newLatLng = marker.getLatLng(); // 获取当前标记的位置
        marker.setLatLng(newLatLng); // 重设标记的位置
      });
    }, 100);
  }
}

export default AntPathPolyline;
